<template>
	<div class="common-chat" v-for="(item,index) in data" >
		<div class="common-chat-content">
			<div class="common-chat-photo">
				<img :src="item.avatar" @error="(e)=>{e.target.src = require('../assets/image/defalut.png')}" alt="">
			</div>
			<div class="common-chat-content-right">
				<div  class="common-chat-answer">
					{{item.title}}
					<span v-if="!item.send_type"> - 出题人：{{item.nickName}}</span>
				</div>
				<div class="common-chat-handle" v-if="item.send_type">
					<span>你的分数：<strong>{{item.score}}</strong> </span>
					<span v-if="item.create_time">{{moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')}}</span>
					<div class="common-chat-handle-right">
						<el-button @click="lookAnswerClick(index,item)">{{!item.answer_type||item.answer_type == 2?'查看答案':'收起答案'}}</el-button>
						<el-button @click="deleteClick(item)" v-if="item.question_type">删除</el-button>
						<el-button @click="nextQuestionClick()" v-if="!item.question_type">下一题</el-button>
					</div>
				</div>
				<div class="common-chat-real" v-if="item.answer_type&&item.answer_type !== 2" v-html="item.real_content">
					
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {LocationFilled,View} from '@element-plus/icons-vue'
	import {selectCity} from '../public/selectCity'
	import moment from 'moment'
	import {
		ref,inject
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter();
	const emits = defineEmits(['next','deleteCollection'])
	const store = inject('store') as any
	const props = defineProps({
		data: Array,
		deleteShow: Boolean
	})
	const count = ref(0)
	const lookAnswerClick = (index,item) =>{
		if(props.data[index].answer_type == 1){
			props.data[index].answer_type = 2
			return
		}
		if(props.data[index].answer_type == 2){
			props.data[index].answer_type = 1
			return
		}
		props.data[index].answer_type = 1
		let result = item.real_content
		props.data[index].real_content = ""
		let count = 0
		let timeInterval = setInterval(()=>{
			count++
			if(count < result.length){
				props.data[index].real_content = result.slice(0,count)
			}else{
				clearInterval(timeInterval)
			}
			emits("scrollBottom")
		},10)
	}
	const nextQuestionClick = () =>{
		emits("next")
	}
	const deleteClick = (item) =>{
		emits("deleteCollection",item)
	}
</script>

<style lang="scss">
	.common-chat{
		margin-bottom: 25px;
		.common-chat-content{
			display: flex;
		}
		.common-chat-photo{
			width: 40px;
			height: 40px;
			min-width: 40px;
			overflow: hidden;
			border-radius: 5px;
			margin-right: 10px;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			
		}
		.common-chat-answer{
			max-width:calc(80% - 50px);
			min-width: 400px;
			height:auto;
			padding: 8px;
			border-radius: 5px;
			background-color: white;
			font-size: 14px;
			line-height: 25px;
			letter-spacing: 1px;
			position: relative;
			span{
				position: absolute;
				left: 100%;
				height: max-content;
				top: 0px;
				bottom: 0;
				margin: auto;
				font-size: 13px;
				color: #222;
				width: 100%;
				opacity: 0.6;
				margin-left: 10px;
				
			}
		}
		.common-chat-handle{
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: calc(80% - 50px);
			    min-width: 400px;
			span{
				font-size: 13px;
				margin-top: 3px;
				
				strong{
					color: rgb(249, 171, 8);
					font-size: 18px;
					vertical-align: sub;
				}
				&:nth-of-type(2){
					opacity: 0.5;
				}
			}
			.el-button{
				background-color: transparent;
				font-size: 13px;
				color: rgb(249, 171, 8);
				border: 0;
				padding: 0 2px;
				margin-right: 3px;
			}
		}
		.common-chat-real{
			max-width:calc(80% - 50px);
			min-width: 400px;
			height:auto;
			padding: 8px;
			border-radius: 5px;
			background-color: white;
			font-size: 14px;
			line-height: 25px;
			letter-spacing: 1px;
			
		}
		
	}
</style>
